<template>
  <div>
    <CellGroup>
      <Swipe class="banner-swipe"
        v-if="record.length" :autoplay="3000">
        <SwipeItem
          v-for="(banner, index) in record"
          :key="index">
          <img :src="banner.url"
            class="banner-img" />
        </SwipeItem>
      </Swipe>
      <Empty image="network" class="banner-swipe"
        v-else />
    </CellGroup>
  </div>
</template>
<script setup lang="ts">
import {
  CellGroup, Empty, Swipe, SwipeItem,
} from 'vant';
import type { PropType } from 'vue';

defineProps({
  record: {
    type: Array as PropType<{ url: string }[]>,
    default: () => [],
  },
});

</script>
<style lang="less" scoped>
.banner-swipe {
  height: 160px;

  .banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>
